<template>
    <div class="app-container" v-loading="loadings">
        <!-- 添加银行卡 -->
        <h5 class="titleInfo">添加银行卡</h5>
        <el-form :model="form" ref="form" :rules="rules" label-width="130px" :inline="true">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="银行卡类型">
                        <el-select v-model="form.type" placeholder="请选择">
                            <el-option
                                :label="item.name"
                                :value="item.value"
                                v-for="item in reviewStatusList"
                                :key="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <!-- 对私账户 -->
                <div v-if="form.type=='1'">
                    <el-col :span="24">
                         <!-- prop="bankAccountName" -->
                        <el-form-item label="户名">
                            <span class="spanToInput">{{form.bankAccountName}}</span>
                            <!-- <el-input readonly v-model="form.bankAccountName" placeholder="请输入户名"></el-input> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="银行卡号" prop="bankAccount">
                            <el-input v-model="form.bankAccount" placeholder="请输入银行卡号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="银行名称" prop="gateId">
                            <el-select v-model="form.gateId" filterable placeholder="请选择银行">
                                <el-option
                                    :label="item.name"
                                    :value="item.value"
                                    v-for="(item,index) in bankNameList"
                                    :key="index"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                         <!-- prop="mobileId" -->
                        <el-form-item label="手机号码">
                            <span class="spanToInput">{{form.mobileId}}</span>
                            <!-- <el-input readonly v-model="form.mobileId" placeholder="请输入手机号码"></el-input> -->
                            <p
                                class="titlep"
                            >此手机号码为法人银行卡预留手机号，请填写对应银行卡号</p>
                            <!-- <span class="spanToInput">{{form.mobileId}}</span> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="验证码" prop="verify">
                            <el-input v-model="form.verify" placeholder="请输入验证码"></el-input>
                        </el-form-item>
                        <el-button
                            type="primary"
                            :disabled="content.indexOf('s后重新发送')>-1"
                            @click="sendmsg(form.mobileId)"
                        >{{ content }}</el-button>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="委托书及其附件" prop="proxyFiles">
                            <attachment
                                ref="attachment"
                                :fileNum="fileNum"
                                :accept="accept"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label=" ">
                            <p class="titlep">
                                1、请先下载《委托书模板》
                                <a style="color:#409eff" href="http://mpingtest.ameimeika.com/api/downloadFile">点击下载</a>
                            </p>
                            <p
                                class="titlep"
                            >2、委托书盖章后请上传扫描件，并上传委托书要求的其余附件，最多允许上传6个附件，支持格式：PDF、JPG、PNG</p>
                        </el-form-item>
                    </el-col>
                </div>
                <!-- 对公账户 -->
                <div v-else>
                    <el-col :span="24">
                        <el-form-item label="企业账户名称">
                            <span class="spanToInput">{{form.bankAccountName}}</span>
                            <!-- <el-input readonly v-model="form.bankAccountName"></el-input> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="银行卡号" prop="bankAccount">
                            <el-input v-model="form.bankAccount" placeholder="请输入银行卡号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="银行名称" prop="gateId">
                            <el-select v-model="form.gateId" filterable placeholder="请选择银行">
                                <el-option
                                    :label="item.name"
                                    :value="item.value"
                                    v-for="(item,index) in bankNameList"
                                    :key="index"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24"></el-col>
                    <el-col :span="24">
                        <el-form-item label="开户行支行" prop="bankBranchName">
                            <el-input v-model="form.bankBranchName" placeholder="开户许可证上的开户行支行全称"></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="24">
                        <el-form-item label="到账通知手机号" prop="mobileId">
                            <el-input v-model="form.mobileId" placeholder="请输入到账通知手机号"></el-input>
                        </el-form-item>
                    </el-col> -->
                </div>
                <el-col :span="24">
                    <el-form-item label=" ">
                        <el-button @click="submitFn('form')" type="primary">确定</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
import attachment from "@/components/attachment/index";
import bankCard from "@/api/bankCard";
export default {
    name: "bankCardAdd",
    components: { attachment },
    data() {
        return {
            loadings:true,
            hospitalId:null,
            content: "发送验证码",
            totalTime: 60,
            canClick: true, // 添加canClick
            form: {
                type: "1",
                targetId:null,
                proxyFiles:[],
                // bankAccountName: null,
                // bankAccount:null,
                // mobileId:null,
                // verify:null,
                // gateId:null,
                // bankBranchName:null,
            },
            // 银行卡类型下拉列表
            reviewStatusList: [
                { name: "对公账户", value: "0" },
                { name: "对私账户", value: "1" }
            ],
            fileNum: 6,
            accept: ".pdf , .jpeg , .jpg , .png ",
            bankNameList: [],
            hospitalInfoName: null,
            rules: {
                bankAccountName: [
                    { required: true, message: "请输入户名", trigger: "blur" }
                ],
                bankAccount: [
                    {
                        required: true,
                        message: "请输入银行卡号",
                        trigger: "blur"
                    }
                ],
                mobileId: [
                    {
                        required: true,
                        message: "请输入手机号码",
                        trigger: "blur"
                    }
                ],
                verify: [
                    { required: true, message: "请输入验证码", trigger: "blur" }
                ],
                proxyFiles: [
                    {
                        required: true,
                        message: "请上传委托书及其附件",
                        trigger: "blur"
                    }
                ],
                gateId: [
                    { required: true, message: "请选择银行", trigger: "blur" }
                ],
                bankBranchName: [
                    {
                        required: true,
                        message: "请输入开户行支行",
                        trigger: "blur"
                    }
                ]
            },
            typeOneForm:{}
        };
    },
    watch: {
        "form.type"(e) {
            this.$refs.form.clearValidate();
            if (e == "0") {
                this.form = { type: "0",targetId:this.hospitalId};
                this.form.bankAccountName = this.hospitalInfoName;
            } else {
                this.form = { type: "1",targetId:this.hospitalId};
                this.form.bankAccountName = this.typeOneForm.bankAccountName;
                this.form.mobileId = this.typeOneForm.mobileId;
            }
        }
    },
    inject: ["reload"],
    mounted() {
        this.getAddInfo()
        this.getBankNameList();
        this.getHospitalInfoByHospitalId();
        this.hospitalId = String(this.$store.state.user.hospitalId)
        this.form.targetId =this.hospitalId
    },
    methods: {
        // 银行卡添加详情
        getAddInfo(){
            let datas = {
                id: String(this.$store.state.user.hospitalId)
            };
            bankCard
                .addBankCardInfo(datas)
                .then(res => {
                    if (!res.data.code) {
                        this.typeOneForm = res.data.data
                        this.form.bankAccountName = this.typeOneForm.bankAccountName;
                        this.form.mobileId = this.typeOneForm.mobileId;
                        // console.log(res)
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    this.loadings = false
                })
                .catch(err => {
                    this.errorStatus(err);
                    this.loadings = false
                });
        },
        // 获取企业账户名称
        getHospitalInfoByHospitalId() {
            let datas = {
                id: String(this.$store.state.user.hospitalId)
            };
            bankCard
                .getHospitalInfoByHospitalId(datas)
                .then(res => {
                    if (!res.data.code) {
                        this.hospitalInfoName = res.data.data.userName;
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                })
                .catch(err => {
                    this.errorStatus(err);
                });
        },
        //获取银行卡下拉
        getBankNameList() {
            bankCard
                .bankDropdownList({})
                .then(res => {
                    if (!res.data.code) {
                        // console.log(res)
                        res.data.data.forEach(e => {
                            this.bankNameList.push({
                                value: e.gateId,
                                name: e.bankName
                            });
                        });
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                })
                .catch(err => {
                    this.errorStatus(err);
                });
        },
        // 发送短信
        sendmsg(phone) {
            if(this.form.bankAccountName&&this.form.bankAccount&&this.form.mobileId){
                let datas = {
                    targetId:this.form.targetId,
                    type:this.form.type,
                    bankAccountName:this.form.bankAccountName,
                    bankAccount:this.form.bankAccount,
                    mobileId:this.form.mobileId,
                    gateId:this.form.gateId
                }
                // console.log(datas)
                bankCard
                    .addBankCard(datas)
                    .then(res => {
                        if (res.data.code == 0) {
                            if (!this.canClick) return;
                            this.canClick = false;
                            this.content = this.totalTime + "s后重新发送";
                            const clock = window.setInterval(() => {
                                this.totalTime--;
                                this.content = this.totalTime + "s后重新发送";
                                if (this.totalTime < 0) {
                                    window.clearInterval(clock);
                                    this.content = "重新发送验证码";
                                    this.totalTime = 60;
                                    this.canClick = true; // 这里重新开启
                                }
                            }, 1000);
                        }else{
                            this.errorStatus(res.data.msg)
                        }
                    })
                    .catch(err => {
                        this.errorStatus(err);
                    });
            }else{
                this.errorStatus("请将户名、银行卡号、手机号码，填写完整后在点击获取验证码")
            }
        },
        addFn() {
            let datas = { ...this.form };
            // 对公
            if (datas.type == "0") {
                bankCard
                    .addBankCard(datas)
                    .then(res => {
                        if (!res.data.code) {
                            this.succStatus("添加成功");
                            this.$router.push("/bankCardIndex");
                            this.reload();
                        } else {
                            this.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: "warning"
                            });
                        }
                    })
                    .catch(err => {
                        this.errorStatus(err);
                    });
            }
            // 对私
            if (datas.type == "1") {
                bankCard
                    .submitBank(datas)
                    .then(res => {
                        if (!res.data.code) {
                            this.succStatus("添加成功");
                            this.$router.push("/bankCardIndex");
                            this.reload();
                        } else {
                            this.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: "warning"
                            });
                        }
                    })
                    .catch(err => {
                        this.errorStatus(err);
                    });
            }
        },
        // 提交
        submitFn(e) {
            if (this.form.type == "1") {
                this.form["proxyFiles"] = this.$refs.attachment.submitUpload();
                // this.$refs.form.clearValidate("proxyFiles");
            }
            // console.log(this.form)
            this.$nextTick(()=>{
                this.$refs[e].validate(valid => {
                    if (valid) {
                        this.addFn();
                    } else {
                        this.$message({
                            message: "有必填项没填，不能提交咯",
                            type: "warning"
                        });
                    }
                });
            })
        },
        //成功状态弹窗
        succStatus(txt, status) {
            this.eleMsg(txt, "success");
        },
        //失败状态弹窗
        errorStatus(txt) {
            this.eleMsg(txt, "error");
        },
        //弹窗组件
        eleMsg(txt, status) {
            this.$message({
                showClose: true,
                message: txt,
                type: status
            });
        }
    }
};
</script>
<style scoped>
.app-container {
    padding: 0.1px !important;
}
.titlep {
    font-size: 12px;
    color: #606266;
    margin-bottom: 0
}
</style>